@import '_mixins';
@import '_vars';

$size: 24px;

.color-picker {
    &-button {
        &, & button {
            padding: 2px !important;
        }
    }

    &-colors {
        @include clearfix;
        max-width: 210px;
        min-width: 210px;
    }

    &-color {
        & {
            @include circle($size);
            float: left;
            border: 2px solid $color-border;
            background: $color-dark-foreground;
            margin: 1px;
        }

        &.rect {
            @include border-radius(0);
            background: transparent;
            border-color: transparent;
            float: none;
        }

        &-inner {
            @include circle($size - 6px);
            margin: 1px;
        }

        &:hover {
            border-color: $color-border-dark;
        }

        &.selected {
            border-color: $color-theme-blue;
        }
    }

    &-tabs {
        margin-top: -10px;
        min-height: 375px;
        max-height: 375px;
    }
}

.sketch-picker {
    @include box-shadow-none;
    padding: 0 !important;
    background: 'none' !important;
    border: 0 !important;
    border-radius: 0 !important;
}

span {
    &.color-picker-button {
        padding: 0 !important;
    }
}